import {
  Avatar,
  Button,
  Checkbox,
  Col,
  ConfigProvider,
  Form,
  Input,
  message,
  Modal,
  notification,
  Row,
  Select,
} from 'antd';
import dayjs from 'dayjs';

import BlueCard from '@/components/BlueCard';
import PadHeader from '@/components/PadHeader';
import PrisonerCard from '@/components/PrisonerCard';
import PrisonInfo from '@/components/PrisonInfo';
import RiskCard from '@/components/RiskCard';
import { DEFAULT_BTN_STYLE, PRISONERS_LIST } from '@/consts';
import { CACHE_KEY, EVENT_TYPE, getCache } from '@/utils';
import { PlusCircleFilled } from '@ant-design/icons';
import { delay } from 'lodash';
import { useEffect, useRef, useState } from 'react';
import io from 'socket.io-client';
import styles from './index.modules.less';

const crminals = PRISONERS_LIST.map((item) => item.name);

const Inspector = () => {
  const currentBc = useRef<any>(null);
  const currentSocket = useRef<any>(null);

  const [isLogin, setLogin] = useState(false);
  const [currentPrisonList, setCurrentPrisonList] = useState(getCache(CACHE_KEY.PRISION_LIST));
  const [currntCrminals, setCurrntCrminals] = useState([]);
  const [rollCallOpen, setRollCallOpen] = useState(false);
  const [riskOpen, setriskOpen] = useState(false);
  const [isCameraing, setIsCameraing] = useState(false);
  const [camerTitle, setCamerTitle] = useState<any>(null);
  const [cameraStatus, setCamerStatus] = useState(0);
  const [currentSickPrison, setCurrentSickPrison] = useState(null);
  const [activeReportPrison, setActiveReportPrison] = useState(null);
  const [enterOpen, setEnterOpen] = useState(false);
  const [selectEnterInfo, setSelectEnterInfo] = useState<any>({});
  const [medOpen, setMedOpen] = useState(false);
  const [firstPrisonerStatus, setFirstPrisonerStatus] = useState('在押');

  const [form] = Form.useForm();

  const beginCamera = async ({ wait = 3000, callback }: any) => {
    setIsCameraing(true);

    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      const video = document.querySelector('#video');
      if ('srcObject' in video) {
        video.srcObject = stream;
      } else {
        // 在支持srcObject的浏览器上，不再支持使用这种方式
        video.src = URL.createObjectURL(stream);
      }
      await video.play();
    } catch (error) {
      console.error('Error accessing camera:', error);
    }
    if (callback instanceof Function)
      await delay(() => {
        callback();
      }, wait);
  };

  const initInter = () => {
    setInterval(() => {
      setCurrentPrisonList(getCache(CACHE_KEY.PRISION_LIST));
    }, 2000);
  };

  const handleMessage = (data: any) => {
    console.log('[data]', data);
    switch (data?.type) {
      case 'emergen_report':
        // Modal.confirm({
        //   title: '紧急报病',
        //   content: '张三申请报病，是否立刻处理？',
        // });
        console.log('[data]', data);
        setActiveReportPrison(data.prisoner);
        // TODO 报病申请受理 pc
        // TODO 是否远程问诊 pc
        // TODO 问诊登记 pc

        break;

      case EVENT_TYPE.ALARAM_CONFIRM:
        notification.warning({
          duration: null,
          message:
            data.data.prisoner +
            `紧急报警（级别：${data.data.level}）（类型：${data.data.type}），请立刻处理！`,
        });

        break;
    }
  };

  const initBroadCast = () => {
    // const bc = new BroadcastChannel('inspector_prison');
    // currentBc.current = bc;

    // if (bc)
    //   bc.onmessage = function (ev) {
    //     console.log('收到消息啦', ev.data);
    //     handleMessage(ev.data);
    //   };

    const socket = io('wss://zkapi.lvseguanjia.cn:16064', {
      ackTimeout: 10000,
      retries: 3,
      auth: {
        serverOffset: 0,
      },
      port: 3000,
    });

    currentSocket.current = socket;
    socket.on(EVENT_TYPE.BEGIN_SHEN_HE_TONG_GUO, () => {
      setFirstPrisonerStatus('待出仓');
    });
  };

  const handleAutoRollCall = () => {
    message.success('已成功发起自动点名');

    const clientOffset = `${currentSocket.current.id}-${0}`;
    currentSocket.current.emit(
      'auto_roll_call',
      {
        type: EVENT_TYPE.BEGIN_AUTO_ROLL_CALL,
        crminals: ['嫌疑人A', '嫌疑人D'],
        index: 0,
      },
      clientOffset,
    );

    // console.log('点名啦', currentBc);
    // message.success('已成功发起自动点名');
    // currentBc.current.postMessage({
    //   type: 'auto_roll_call',
    //   data: {
    //     crminals,
    //     index: 0,
    //   },
    // });
  };

  const handleRollCall = () => {
    // currentBc.current.postMessage({
    //   type: 'auto_roll_call',
    //   data: {
    //     crminals: currntCrminals,
    //     index: 0,
    //   },
    // });
    message.success('已成功发起自动点名');
    let counter = 0;
    const clientOffset = `${currentSocket.current.id}-${counter++}`;
    setRollCallOpen(false);
    currentSocket.current.emit(
      'auto_roll_call',
      {
        type: EVENT_TYPE.BEGIN_AUTO_ROLL_CALL,
        crminals: currntCrminals,
        index: 0,
      },
      clientOffset,
    );
  };

  const onChangeCrminals = (val: any) => {
    console.log('[val]', val);
    setCurrntCrminals(val);
  };

  const handleDiagnosis = () => {
    // setIsCameraing(true);
    // setCamerTitle('人脸识别中...');
    // beginCamera({
    //   callback: () => {
    // message.success(`识别成功`);
    setIsCameraing(true);
    setCamerTitle('选择巡诊病人');
    setCamerStatus(10);
    //   },
    // });
  };

  const handleMovePrison = (data: any) => {
    if (selectEnterInfo.type === 1) {
      // emitEvent(EVENT_TYPE.OUT_REGIS, data);

      const clientOffset = `${currentSocket.current.id}-${0}`;
      currentSocket.current.emit(
        EVENT_TYPE.OUT_REGIS,
        {
          type: EVENT_TYPE.BEGIN_OUT_REGIS,
          ...data,
        },
        clientOffset,
      );
      setFirstPrisonerStatus('会见中');
    }

    if (selectEnterInfo.type === 2) {
      const clientOffset = `${currentSocket.current.id}-${0}`;
      currentSocket.current.emit(
        EVENT_TYPE.IN_REGIS,
        {
          type: EVENT_TYPE.BEGIN_IN_REGIS,
          ...data,
        },
        clientOffset,
      );
      setFirstPrisonerStatus('在押');

      // emitEvent(EVENT_TYPE.IN_REGIS, data);
    }

    setEnterOpen(false);
    setSelectEnterInfo({});
  };

  const handleMore = () => {
    message.info('待支持');
  };

  const handleExitCamera = () => {
    if (cameraStatus === 10) {
      message.success('巡诊完成');
      setMedOpen(false);

      // emitEvent(EVENT_TYPE.MEDICINE_CALL, {
      //   name: currentSickPrison,
      // });

      const clientOffset = `${currentSocket.current.id}-${0}`;
      currentSocket.current.emit(
        EVENT_TYPE.MEDICINE_CALL,
        {
          type: EVENT_TYPE.BEGIN_MEDICINE_CALL,
          name: currentSickPrison,
        },
        clientOffset,
      );
    }
    setCamerStatus(0);
    setIsCameraing(false);
  };

  const login = () => {
    setIsCameraing(true);
    setCamerTitle('人脸识别中...');
    beginCamera({
      callback: () => {
        message.success('识别成功');
        setLogin(true);
        setIsCameraing(false);
      },
    });
  };

  useEffect(() => {
    initBroadCast();

    initInter();
  }, []);

  return (
    <>
      <Modal
        open={enterOpen}
        onCancel={() => {
          setEnterOpen(false);
          setSelectEnterInfo({});
        }}
        width={1000}
        title="进出监室登记"
        footer={null}
      >
        <div className="flex-center f-col pad20">
          {!selectEnterInfo.type && !selectEnterInfo.reason && (
            <h1 className="b">请选择带出/带入</h1>
          )}

          {selectEnterInfo.type === 1 && !selectEnterInfo.reason && (
            <h1 className="b">请选择原因</h1>
          )}

          {selectEnterInfo.type === 2 && !selectEnterInfo.reason && (
            <h1 className="b">请进行安全检查</h1>
          )}

          {selectEnterInfo.type && selectEnterInfo.reason && <h1 className="b">请选择被监管人</h1>}

          {!selectEnterInfo.type && !selectEnterInfo.reason && (
            <Row gutter={[20, 20]}>
              <Col span={12}>
                <Button
                  type="primary"
                  size="large"
                  style={DEFAULT_BTN_STYLE}
                  onClick={() => {
                    setSelectEnterInfo({
                      type: 1,
                    });
                  }}
                >
                  带出
                </Button>
              </Col>
              <Col span={12}>
                <Button
                  type="primary"
                  size="large"
                  style={DEFAULT_BTN_STYLE}
                  onClick={() => {
                    setSelectEnterInfo({
                      type: 2,
                    });
                  }}
                >
                  带入
                </Button>
              </Col>
            </Row>
          )}

          {selectEnterInfo.type === 1 && !selectEnterInfo.reason && (
            <Row gutter={[20, 20]}>
              <Col span={12}>
                <Button
                  type="primary"
                  size="large"
                  style={DEFAULT_BTN_STYLE}
                  onClick={() => {
                    setSelectEnterInfo({
                      ...selectEnterInfo,
                      reason: '会见',
                    });
                  }}
                >
                  会见
                </Button>
              </Col>
              <Col span={12}>
                <Button
                  type="primary"
                  size="large"
                  style={DEFAULT_BTN_STYLE}
                  onClick={() => {
                    setSelectEnterInfo({
                      ...selectEnterInfo,
                      reason: '谈话',
                    });
                  }}
                >
                  谈话
                </Button>
              </Col>
            </Row>
          )}

          {selectEnterInfo.type === 2 && !selectEnterInfo.reason && (
            <Row gutter={[20, 20]}>
              <Col span={12}>
                <Button
                  type="primary"
                  size="large"
                  style={DEFAULT_BTN_STYLE}
                  onClick={() => {
                    setSelectEnterInfo({
                      ...selectEnterInfo,
                      reason: '会见',
                    });
                  }}
                >
                  确认
                </Button>
              </Col>
            </Row>
          )}

          {selectEnterInfo.type && selectEnterInfo.reason && (
            <Row gutter={[10, 10]}>
              {currentPrisonList.map((data, index) => {
                const isActive = data.name === activeReportPrison;

                return (
                  // eslint-disable-next-line react/jsx-key
                  <Col span={6}>
                    <PrisonerCard
                      {...data}
                      status={index === 0 ? firstPrisonerStatus : data.status}
                      setriskOpen={setriskOpen}
                      onClick={() => handleMovePrison(data)}
                    >
                      {isActive && (
                        <div className={styles.activePrisonContainer}>
                          <div>紧急报病中</div>
                          <Button
                            danger
                            onClick={(e) => {
                              e.stopPropagation();
                              setActiveReportPrison(null);
                            }}
                          >
                            知道了
                          </Button>
                        </div>
                      )}
                    </PrisonerCard>
                  </Col>
                );
              })}
            </Row>
          )}
        </div>
      </Modal>
      <Modal
        open={riskOpen}
        width={'90%'}
        closable
        footer={null}
        title="风险查看"
        onCancel={() => setriskOpen(false)}
      >
        <RiskCard></RiskCard>
      </Modal>

      <Modal
        title="治疗及处置"
        open={medOpen}
        okText="确认"
        cancelText="取消"
        onOk={() => {
          handleExitCamera();
        }}
        onCancel={() => setMedOpen(false)}
      >
        <Form
          labelCol={{ span: 5 }}
          form={form}
          initialValues={{
            result: '部有黏膜充血、扁桃体有明显的充血肿大，扁桃体表面有化脓点，高热39.4、四肢疼痛',
            rule: '每次1片 一天3次 3天',
            sickResult: '扁桃腺化脓',
          }}
        >
          <h3>医生诊断</h3>
          <Form.Item label="诊断" name="sickResult">
            <Select allowClear disabled>
              <Select.Option>扁桃腺化脓</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item label="诊断结果" name={'result'}>
            <Input.TextArea disabled rows={5} placeholder="请输入"></Input.TextArea>
          </Form.Item>
          <h3>治疗处置</h3>
          <Form.Item label="药剂">
            <div className="flex-aic">
              <Checkbox.Group defaultValue={['1']} disabled>
                <Checkbox value={'1'}>阿莫西林</Checkbox>
              </Checkbox.Group>
              <PlusCircleFilled
                size={30}
                style={{ fontSize: 30, cursor: 'pointer' }}
              ></PlusCircleFilled>
            </div>
          </Form.Item>

          <Form.Item label="用法" name={'rule'}>
            <Input disabled defaultValue={''}></Input>
          </Form.Item>

          <Form.Item label="其他处置">
            <Input.TextArea disabled rows={3} placeholder="请输入诊断信息"></Input.TextArea>
          </Form.Item>

          <Form.Item label="备注">
            <Input.TextArea rows={3} placeholder="请输入诊断信息"></Input.TextArea>
          </Form.Item>
        </Form>
      </Modal>

      <ConfigProvider
        theme={{
          components: {
            Descriptions: {
              contentColor: '#FFF',
              extraColor: '#FFF',
              titleColor: '#FFF',
              labelBg: '#FFF',
              titleMarginBottom: 5,
            },
          },
          token: {
            colorTextTertiary: '#FFF',
          },
        }}
      >
        <div className={styles.container}>
          <Modal
            title="手动点名"
            open={rollCallOpen}
            onOk={handleRollCall}
            onCancel={() => {
              setRollCallOpen(false);
              setCurrntCrminals([]);
            }}
          >
            <Checkbox.Group options={crminals} value={currntCrminals} onChange={onChangeCrminals} />
          </Modal>

          <PadHeader extra={'（外屏）'}></PadHeader>

          {isCameraing && (
            <div className={styles.camerContainer}>
              {camerTitle && <div className={styles.camerTitle}>{camerTitle}</div>}

              {cameraStatus !== 10 && (
                <div
                  id="camera"
                  className={styles.camera}
                  style={{ width: '70vh', height: isCameraing ? '70vh' : 0 }}
                >
                  <video
                    className={styles.camera}
                    id="video"
                    autoPlay
                    style={{ width: '70vh', height: isCameraing ? '70vh' : 0 }}
                  ></video>
                </div>
              )}

              {cameraStatus === 10 && (
                <>
                  <div>
                    <Row gutter={[20, 20]} className="f1">
                      <Col span={24}>
                        <PrisonerCard
                          // style={{ opacity: data.name === currentSickPrison ? 1 : 0.5 }}
                          style={{ opacity: 1 }}
                          name="嫌疑人A"
                          status={'在押'}
                          tag={[{ name: '报病', color: 'green' }]}
                          setriskOpen={setriskOpen}
                          onClick={() => {
                            setMedOpen(true);
                            setCurrentSickPrison('嫌疑人A');
                          }}
                        ></PrisonerCard>
                      </Col>
                      {currentPrisonList.map((data) => {
                        const isSick = data.tag.findIndex((item) => item.name === '病');
                        if (isSick === -1) return;

                        return (
                          // eslint-disable-next-line react/jsx-key
                          <Col span={24}>
                            <PrisonerCard
                              // style={{ opacity: data.name === currentSickPrison ? 1 : 0.5 }}
                              style={{ opacity: 1 }}
                              {...data}
                              setriskOpen={setriskOpen}
                              onClick={() => {
                                setMedOpen(true);
                                setCurrentSickPrison(data.name);
                              }}
                            ></PrisonerCard>
                          </Col>
                        );
                      })}
                    </Row>
                  </div>
                  {/* <div>
                    <Button
                      onClick={handleExitCamera}
                      size="large"
                      type="primary"
                      style={DEFAULT_BTN_STYLE}
                    >
                      确认
                    </Button>
                  </div> */}
                  <div>
                    <Button
                      onClick={() => setIsCameraing(false)}
                      size="large"
                      danger
                      type="primary"
                      style={DEFAULT_BTN_STYLE}
                    >
                      退出
                    </Button>
                  </div>
                  <div className="mt10">
                    医生A 巡诊打卡已完成 {dayjs().format('YYYY-MM-DD hh:mm')}
                  </div>
                </>
              )}
            </div>
          )}

          {!isLogin && !isCameraing && (
            <div className="flex-center f-col pad20" style={{ height: '70vh' }}>
              <Row gutter={20} className="w100">
                <Col span={8}>
                  <div className={styles.mainContentCard}>
                    <Avatar
                      shape="square"
                      size={200}
                      icon={
                        <svg
                          t="1712402003212"
                          className="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="4935"
                          width="200"
                          height="200"
                        >
                          <path
                            d="M518.4 217.6l25.6-12.8 25.6 12.8-6.4-25.6 12.8-19.2-19.2-6.4-12.8-19.2-12.8 19.2-19.2 6.4 12.8 19.2-6.4 25.6zM320 300.8v25.6c0 38.4 102.4 70.4 224 70.4S768 364.8 768 326.4v-19.2c-51.2-19.2-140.8-25.6-236.8-25.6-83.2 0-160 6.4-211.2 19.2z m-38.4-83.2c12.8 32 38.4 70.4 38.4 70.4v6.4c51.2-12.8 128-19.2 211.2-19.2 96 0 179.2 12.8 230.4 25.6v-12.8s25.6-44.8 38.4-70.4c6.4-12.8 12.8-32 12.8-44.8 0-12.8-6.4-19.2-19.2-25.6-25.6-19.2-108.8-57.6-147.2-76.8-6.4 0-19.2-6.4-32-6.4H544 473.6c-12.8 0-25.6 6.4-32 6.4-38.4 19.2-121.6 57.6-160 70.4-12.8 6.4-19.2 12.8-19.2 25.6 6.4 19.2 12.8 32 19.2 51.2z m211.2-102.4s12.8 6.4 25.6 6.4 25.6-12.8 25.6-12.8 12.8 12.8 25.6 12.8 25.6-6.4 25.6-6.4l19.2 25.6s-12.8 6.4-12.8 19.2c0 19.2 6.4 12.8 6.4 44.8 0 32-70.4 51.2-70.4 51.2s-64-12.8-64-51.2c6.4-25.6 12.8-25.6 12.8-44.8 0-6.4-12.8-19.2-12.8-19.2l19.2-25.6z m192 614.4c-25.6-6.4-44.8-19.2-44.8-25.6v-51.2s115.2-96 115.2-256v-25.6c-25.6 25.6-108.8 44.8-211.2 44.8s-185.6-19.2-211.2-51.2v25.6c0 160 115.2 256 115.2 256v57.6c0 12.8-25.6 25.6-38.4 32-243.2 38.4-281.6 166.4-281.6 192 12.8 89.6 352 96 409.6 96-12.8-32-32-89.6-32-179.2 0-32 38.4-32 38.4-32s38.4 0 38.4 32c0 83.2-19.2 147.2-32 179.2 51.2 0 403.2-6.4 409.6-96 0-25.6-38.4-153.6-275.2-198.4z m-147.2 89.6c-25.6 0-38.4-19.2-38.4-38.4 0-25.6 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4-12.8 38.4-38.4 38.4z"
                            p-id="4936"
                            fill="#ffffff"
                          ></path>
                        </svg>
                      }
                    />
                    <div className={styles.name}>民警A</div>
                    <div className={styles.label}>主管民警</div>
                  </div>
                </Col>
                <Col span={8}>
                  <div className={styles.mainContentCard}>
                    <Avatar
                      shape="square"
                      size={200}
                      icon={
                        <svg
                          t="1712402003212"
                          className="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="4935"
                          width="200"
                          height="200"
                        >
                          <path
                            d="M518.4 217.6l25.6-12.8 25.6 12.8-6.4-25.6 12.8-19.2-19.2-6.4-12.8-19.2-12.8 19.2-19.2 6.4 12.8 19.2-6.4 25.6zM320 300.8v25.6c0 38.4 102.4 70.4 224 70.4S768 364.8 768 326.4v-19.2c-51.2-19.2-140.8-25.6-236.8-25.6-83.2 0-160 6.4-211.2 19.2z m-38.4-83.2c12.8 32 38.4 70.4 38.4 70.4v6.4c51.2-12.8 128-19.2 211.2-19.2 96 0 179.2 12.8 230.4 25.6v-12.8s25.6-44.8 38.4-70.4c6.4-12.8 12.8-32 12.8-44.8 0-12.8-6.4-19.2-19.2-25.6-25.6-19.2-108.8-57.6-147.2-76.8-6.4 0-19.2-6.4-32-6.4H544 473.6c-12.8 0-25.6 6.4-32 6.4-38.4 19.2-121.6 57.6-160 70.4-12.8 6.4-19.2 12.8-19.2 25.6 6.4 19.2 12.8 32 19.2 51.2z m211.2-102.4s12.8 6.4 25.6 6.4 25.6-12.8 25.6-12.8 12.8 12.8 25.6 12.8 25.6-6.4 25.6-6.4l19.2 25.6s-12.8 6.4-12.8 19.2c0 19.2 6.4 12.8 6.4 44.8 0 32-70.4 51.2-70.4 51.2s-64-12.8-64-51.2c6.4-25.6 12.8-25.6 12.8-44.8 0-6.4-12.8-19.2-12.8-19.2l19.2-25.6z m192 614.4c-25.6-6.4-44.8-19.2-44.8-25.6v-51.2s115.2-96 115.2-256v-25.6c-25.6 25.6-108.8 44.8-211.2 44.8s-185.6-19.2-211.2-51.2v25.6c0 160 115.2 256 115.2 256v57.6c0 12.8-25.6 25.6-38.4 32-243.2 38.4-281.6 166.4-281.6 192 12.8 89.6 352 96 409.6 96-12.8-32-32-89.6-32-179.2 0-32 38.4-32 38.4-32s38.4 0 38.4 32c0 83.2-19.2 147.2-32 179.2 51.2 0 403.2-6.4 409.6-96 0-25.6-38.4-153.6-275.2-198.4z m-147.2 89.6c-25.6 0-38.4-19.2-38.4-38.4 0-25.6 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4-12.8 38.4-38.4 38.4z"
                            p-id="4936"
                            fill="#ffffff"
                          ></path>
                        </svg>
                      }
                    />
                    <div className={styles.name}>民警B</div>
                    <div className={styles.label}>协管民警</div>
                  </div>
                </Col>
                <Col span={8}>
                  <div className={styles.mainContentCard}>
                    <Avatar
                      shape="square"
                      size={200}
                      icon={
                        <svg
                          t="1712402003212"
                          className="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="4935"
                          width="200"
                          height="200"
                        >
                          <path
                            d="M518.4 217.6l25.6-12.8 25.6 12.8-6.4-25.6 12.8-19.2-19.2-6.4-12.8-19.2-12.8 19.2-19.2 6.4 12.8 19.2-6.4 25.6zM320 300.8v25.6c0 38.4 102.4 70.4 224 70.4S768 364.8 768 326.4v-19.2c-51.2-19.2-140.8-25.6-236.8-25.6-83.2 0-160 6.4-211.2 19.2z m-38.4-83.2c12.8 32 38.4 70.4 38.4 70.4v6.4c51.2-12.8 128-19.2 211.2-19.2 96 0 179.2 12.8 230.4 25.6v-12.8s25.6-44.8 38.4-70.4c6.4-12.8 12.8-32 12.8-44.8 0-12.8-6.4-19.2-19.2-25.6-25.6-19.2-108.8-57.6-147.2-76.8-6.4 0-19.2-6.4-32-6.4H544 473.6c-12.8 0-25.6 6.4-32 6.4-38.4 19.2-121.6 57.6-160 70.4-12.8 6.4-19.2 12.8-19.2 25.6 6.4 19.2 12.8 32 19.2 51.2z m211.2-102.4s12.8 6.4 25.6 6.4 25.6-12.8 25.6-12.8 12.8 12.8 25.6 12.8 25.6-6.4 25.6-6.4l19.2 25.6s-12.8 6.4-12.8 19.2c0 19.2 6.4 12.8 6.4 44.8 0 32-70.4 51.2-70.4 51.2s-64-12.8-64-51.2c6.4-25.6 12.8-25.6 12.8-44.8 0-6.4-12.8-19.2-12.8-19.2l19.2-25.6z m192 614.4c-25.6-6.4-44.8-19.2-44.8-25.6v-51.2s115.2-96 115.2-256v-25.6c-25.6 25.6-108.8 44.8-211.2 44.8s-185.6-19.2-211.2-51.2v25.6c0 160 115.2 256 115.2 256v57.6c0 12.8-25.6 25.6-38.4 32-243.2 38.4-281.6 166.4-281.6 192 12.8 89.6 352 96 409.6 96-12.8-32-32-89.6-32-179.2 0-32 38.4-32 38.4-32s38.4 0 38.4 32c0 83.2-19.2 147.2-32 179.2 51.2 0 403.2-6.4 409.6-96 0-25.6-38.4-153.6-275.2-198.4z m-147.2 89.6c-25.6 0-38.4-19.2-38.4-38.4 0-25.6 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4-12.8 38.4-38.4 38.4z"
                            p-id="4936"
                            fill="#ffffff"
                          ></path>
                        </svg>
                      }
                    />
                    <div className={styles.name}>民警C</div>
                    <div className={styles.label}>协管民警</div>
                  </div>
                </Col>
              </Row>

              <Button
                type="primary"
                style={{ ...DEFAULT_BTN_STYLE, marginTop: 50 }}
                className="mt20"
                onClick={login}
              >
                登录
              </Button>
            </div>
          )}

          {isLogin && (
            <>
              {!isCameraing && (
                <Row wrap className="h100" style={{ height: 'calc(100vh - 157px - 20px - 85px)' }}>
                  <Row className="w100 h100">
                    <Col span={8} className="f-col">
                      <BlueCard
                        content={
                          <Row gutter={20} className="w100">
                            <Col span={8}>
                              <div className={styles.mainContentCard}>
                                <Avatar
                                  shape="square"
                                  size={90}
                                  icon={
                                    <svg
                                      t="1712402003212"
                                      className="icon"
                                      viewBox="0 0 1024 1024"
                                      version="1.1"
                                      xmlns="http://www.w3.org/2000/svg"
                                      p-id="4935"
                                      width="200"
                                      height="200"
                                    >
                                      <path
                                        d="M518.4 217.6l25.6-12.8 25.6 12.8-6.4-25.6 12.8-19.2-19.2-6.4-12.8-19.2-12.8 19.2-19.2 6.4 12.8 19.2-6.4 25.6zM320 300.8v25.6c0 38.4 102.4 70.4 224 70.4S768 364.8 768 326.4v-19.2c-51.2-19.2-140.8-25.6-236.8-25.6-83.2 0-160 6.4-211.2 19.2z m-38.4-83.2c12.8 32 38.4 70.4 38.4 70.4v6.4c51.2-12.8 128-19.2 211.2-19.2 96 0 179.2 12.8 230.4 25.6v-12.8s25.6-44.8 38.4-70.4c6.4-12.8 12.8-32 12.8-44.8 0-12.8-6.4-19.2-19.2-25.6-25.6-19.2-108.8-57.6-147.2-76.8-6.4 0-19.2-6.4-32-6.4H544 473.6c-12.8 0-25.6 6.4-32 6.4-38.4 19.2-121.6 57.6-160 70.4-12.8 6.4-19.2 12.8-19.2 25.6 6.4 19.2 12.8 32 19.2 51.2z m211.2-102.4s12.8 6.4 25.6 6.4 25.6-12.8 25.6-12.8 12.8 12.8 25.6 12.8 25.6-6.4 25.6-6.4l19.2 25.6s-12.8 6.4-12.8 19.2c0 19.2 6.4 12.8 6.4 44.8 0 32-70.4 51.2-70.4 51.2s-64-12.8-64-51.2c6.4-25.6 12.8-25.6 12.8-44.8 0-6.4-12.8-19.2-12.8-19.2l19.2-25.6z m192 614.4c-25.6-6.4-44.8-19.2-44.8-25.6v-51.2s115.2-96 115.2-256v-25.6c-25.6 25.6-108.8 44.8-211.2 44.8s-185.6-19.2-211.2-51.2v25.6c0 160 115.2 256 115.2 256v57.6c0 12.8-25.6 25.6-38.4 32-243.2 38.4-281.6 166.4-281.6 192 12.8 89.6 352 96 409.6 96-12.8-32-32-89.6-32-179.2 0-32 38.4-32 38.4-32s38.4 0 38.4 32c0 83.2-19.2 147.2-32 179.2 51.2 0 403.2-6.4 409.6-96 0-25.6-38.4-153.6-275.2-198.4z m-147.2 89.6c-25.6 0-38.4-19.2-38.4-38.4 0-25.6 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4-12.8 38.4-38.4 38.4z"
                                        p-id="4936"
                                        fill="#ffffff"
                                      ></path>
                                    </svg>
                                  }
                                />
                                <div className={styles.name}>民警A</div>
                                <div className={styles.label}>主管民警</div>
                              </div>
                            </Col>
                            <Col span={8}>
                              <div className={styles.mainContentCard}>
                                <Avatar
                                  shape="square"
                                  size={90}
                                  icon={
                                    <svg
                                      t="1712402003212"
                                      className="icon"
                                      viewBox="0 0 1024 1024"
                                      version="1.1"
                                      xmlns="http://www.w3.org/2000/svg"
                                      p-id="4935"
                                      width="200"
                                      height="200"
                                    >
                                      <path
                                        d="M518.4 217.6l25.6-12.8 25.6 12.8-6.4-25.6 12.8-19.2-19.2-6.4-12.8-19.2-12.8 19.2-19.2 6.4 12.8 19.2-6.4 25.6zM320 300.8v25.6c0 38.4 102.4 70.4 224 70.4S768 364.8 768 326.4v-19.2c-51.2-19.2-140.8-25.6-236.8-25.6-83.2 0-160 6.4-211.2 19.2z m-38.4-83.2c12.8 32 38.4 70.4 38.4 70.4v6.4c51.2-12.8 128-19.2 211.2-19.2 96 0 179.2 12.8 230.4 25.6v-12.8s25.6-44.8 38.4-70.4c6.4-12.8 12.8-32 12.8-44.8 0-12.8-6.4-19.2-19.2-25.6-25.6-19.2-108.8-57.6-147.2-76.8-6.4 0-19.2-6.4-32-6.4H544 473.6c-12.8 0-25.6 6.4-32 6.4-38.4 19.2-121.6 57.6-160 70.4-12.8 6.4-19.2 12.8-19.2 25.6 6.4 19.2 12.8 32 19.2 51.2z m211.2-102.4s12.8 6.4 25.6 6.4 25.6-12.8 25.6-12.8 12.8 12.8 25.6 12.8 25.6-6.4 25.6-6.4l19.2 25.6s-12.8 6.4-12.8 19.2c0 19.2 6.4 12.8 6.4 44.8 0 32-70.4 51.2-70.4 51.2s-64-12.8-64-51.2c6.4-25.6 12.8-25.6 12.8-44.8 0-6.4-12.8-19.2-12.8-19.2l19.2-25.6z m192 614.4c-25.6-6.4-44.8-19.2-44.8-25.6v-51.2s115.2-96 115.2-256v-25.6c-25.6 25.6-108.8 44.8-211.2 44.8s-185.6-19.2-211.2-51.2v25.6c0 160 115.2 256 115.2 256v57.6c0 12.8-25.6 25.6-38.4 32-243.2 38.4-281.6 166.4-281.6 192 12.8 89.6 352 96 409.6 96-12.8-32-32-89.6-32-179.2 0-32 38.4-32 38.4-32s38.4 0 38.4 32c0 83.2-19.2 147.2-32 179.2 51.2 0 403.2-6.4 409.6-96 0-25.6-38.4-153.6-275.2-198.4z m-147.2 89.6c-25.6 0-38.4-19.2-38.4-38.4 0-25.6 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4-12.8 38.4-38.4 38.4z"
                                        p-id="4936"
                                        fill="#ffffff"
                                      ></path>
                                    </svg>
                                  }
                                />
                                <div className={styles.name}>民警B</div>
                                <div className={styles.label}>协管民警</div>
                              </div>
                            </Col>
                            <Col span={8}>
                              <div className={styles.mainContentCard}>
                                <Avatar
                                  shape="square"
                                  size={90}
                                  icon={
                                    <svg
                                      t="1712402003212"
                                      className="icon"
                                      viewBox="0 0 1024 1024"
                                      version="1.1"
                                      xmlns="http://www.w3.org/2000/svg"
                                      p-id="4935"
                                      width="200"
                                      height="200"
                                    >
                                      <path
                                        d="M518.4 217.6l25.6-12.8 25.6 12.8-6.4-25.6 12.8-19.2-19.2-6.4-12.8-19.2-12.8 19.2-19.2 6.4 12.8 19.2-6.4 25.6zM320 300.8v25.6c0 38.4 102.4 70.4 224 70.4S768 364.8 768 326.4v-19.2c-51.2-19.2-140.8-25.6-236.8-25.6-83.2 0-160 6.4-211.2 19.2z m-38.4-83.2c12.8 32 38.4 70.4 38.4 70.4v6.4c51.2-12.8 128-19.2 211.2-19.2 96 0 179.2 12.8 230.4 25.6v-12.8s25.6-44.8 38.4-70.4c6.4-12.8 12.8-32 12.8-44.8 0-12.8-6.4-19.2-19.2-25.6-25.6-19.2-108.8-57.6-147.2-76.8-6.4 0-19.2-6.4-32-6.4H544 473.6c-12.8 0-25.6 6.4-32 6.4-38.4 19.2-121.6 57.6-160 70.4-12.8 6.4-19.2 12.8-19.2 25.6 6.4 19.2 12.8 32 19.2 51.2z m211.2-102.4s12.8 6.4 25.6 6.4 25.6-12.8 25.6-12.8 12.8 12.8 25.6 12.8 25.6-6.4 25.6-6.4l19.2 25.6s-12.8 6.4-12.8 19.2c0 19.2 6.4 12.8 6.4 44.8 0 32-70.4 51.2-70.4 51.2s-64-12.8-64-51.2c6.4-25.6 12.8-25.6 12.8-44.8 0-6.4-12.8-19.2-12.8-19.2l19.2-25.6z m192 614.4c-25.6-6.4-44.8-19.2-44.8-25.6v-51.2s115.2-96 115.2-256v-25.6c-25.6 25.6-108.8 44.8-211.2 44.8s-185.6-19.2-211.2-51.2v25.6c0 160 115.2 256 115.2 256v57.6c0 12.8-25.6 25.6-38.4 32-243.2 38.4-281.6 166.4-281.6 192 12.8 89.6 352 96 409.6 96-12.8-32-32-89.6-32-179.2 0-32 38.4-32 38.4-32s38.4 0 38.4 32c0 83.2-19.2 147.2-32 179.2 51.2 0 403.2-6.4 409.6-96 0-25.6-38.4-153.6-275.2-198.4z m-147.2 89.6c-25.6 0-38.4-19.2-38.4-38.4 0-25.6 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4-12.8 38.4-38.4 38.4z"
                                        p-id="4936"
                                        fill="#ffffff"
                                      ></path>
                                    </svg>
                                  }
                                />
                                <div className={styles.name}>民警C</div>
                                <div className={styles.label}>协管民警</div>
                              </div>
                            </Col>
                          </Row>
                        }
                      ></BlueCard>
                      <BlueCard title="今日值班" className={'mt10 '}>
                        <Row gutter={[10, 10]} className="w100 mt10" style={{ marginLeft: 0 }}>
                          <Col span={8}>
                            <div className="simple-card">
                              <div className="title">11:00-13:00</div>
                              <div className="label">民警A</div>
                            </div>
                          </Col>
                          <Col span={8}>
                            <div className="simple-card">
                              <div className="title">13:00-15:00</div>
                              <div className="label">民警B</div>
                            </div>
                          </Col>
                          <Col span={8}>
                            <div className="simple-card">
                              <div className="title">15:00-17:00</div>

                              <div className="label">民警C</div>
                            </div>
                          </Col>
                        </Row>
                      </BlueCard>

                      <BlueCard title="监室事件" className={'mt10 f1'}>
                        <div className="flex-col w100">
                          <div className="row2-container w100">
                            <h3>嫌疑人A</h3>
                            <div className="f-bt w100">
                              <div className="label">监室从A101调到A201</div>
                              <div className="label">2024-03-02 11:00:00</div>
                            </div>
                          </div>
                          {/* <div className="row2-container">
                            <h3>乐子豪</h3>
                            <div className="f-bt w100">
                              <div className="label">监室从A101调到A201</div>
                              <div className="label">2024-03-02 11:00:00</div>
                            </div>
                          </div>
                          <div className="row2-container">
                            <h3>乐子豪</h3>
                            <div className="f-bt w100">
                              <div className="label">监室从A101调到A201</div>
                              <div className="label">2024-03-02 11:00:00</div>
                            </div>
                          </div> */}
                        </div>
                      </BlueCard>
                    </Col>
                    <Col span={16} style={{ paddingLeft: 10 }}>
                      <BlueCard className={'w100 h100'} style={{ padding: 8 }}>
                        <Row style={{ padding: '10px' }} className="f-col">
                          <PrisonInfo></PrisonInfo>

                          <Row gutter={[20, 20]} className="f1">
                            {currentPrisonList.map((data, index) => {
                              if (index > 11) return null;
                              const isActive = data.name === activeReportPrison;

                              return (
                                // eslint-disable-next-line react/jsx-key
                                <Col span={6}>
                                  <PrisonerCard
                                    {...data}
                                    status={index === 0 ? firstPrisonerStatus : data.status}
                                    setriskOpen={setriskOpen}
                                  >
                                    {isActive && (
                                      <div className={styles.activePrisonContainer}>
                                        <div>紧急报病中</div>
                                        <Button
                                          danger
                                          onClick={(e) => {
                                            e.stopPropagation();
                                            setActiveReportPrison(null);
                                          }}
                                        >
                                          知道了
                                        </Button>
                                      </div>
                                    )}
                                  </PrisonerCard>
                                </Col>
                              );
                            })}
                          </Row>
                        </Row>
                      </BlueCard>
                    </Col>
                  </Row>

                  <div className={styles.bottomTool}>
                    <div
                      className={styles.toolCard}
                      style={{ backgroundColor: 'blue' }}
                      onClick={handleMore}
                    >
                      <svg
                        t="1712402615513"
                        className="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="7598"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M371.75808 632.20736c0-77.45536 62.78656-140.24192 140.24192-140.24192 77.45536 0 140.24192 62.78656 140.24192 140.24192 0 32.9728-11.46368 64.0768-31.60064 88.704a221.30176 221.30176 0 0 1 61.36832 51.54304h230.68672a20.03456 20.03456 0 0 0 20.03456-20.03456V471.93088a20.03456 20.03456 0 0 0-20.03456-20.03456H111.30368a20.03456 20.03456 0 0 0-20.03456 20.03456v280.48896a20.03456 20.03456 0 0 0 20.03456 20.03456h230.68672a221.30176 221.30176 0 0 1 61.36832-51.54304 139.85792 139.85792 0 0 1-31.60064-88.704z m73.27232 113.01376a180.92544 180.92544 0 0 0-77.30176 59.29984 20.03456 20.03456 0 0 1-16.0256 8.00256H111.3088c-33.19296 0-60.10368-26.91072-60.10368-60.1088V471.936c0-33.19296 26.91072-60.1088 60.1088-60.1088h801.3824c33.19808 0 60.1088 26.91584 60.1088 60.1088v280.48896c0 33.19296-26.91072 60.10368-60.1088 60.10368h-240.39936c-6.2976 0-12.2368-2.9696-16.02048-8.00256a180.92544 180.92544 0 0 0-77.30176-59.29984c-14.30528-5.72416-17.06496-24.7808-4.9664-34.32448a99.9424 99.9424 0 0 0 38.1696-78.68928c0-55.3216-44.8512-100.1728-100.1728-100.1728-55.32672 0-100.1728 44.8512-100.1728 100.1728a99.9424 99.9424 0 0 0 38.1696 78.68928c12.09856 9.54368 9.33888 28.60032-4.9664 34.32448z m247.28064 187.50976v-20.03456c0-74.37824-45.45024-140.29824-113.34144-167.4752-14.30528-5.72416-17.06496-24.7808-4.9664-34.32448a99.9424 99.9424 0 0 0 38.1696-78.68928c0-55.3216-44.8512-100.1728-100.1728-100.1728-55.32672 0-100.1728 44.8512-100.1728 100.1728a99.9424 99.9424 0 0 0 38.1696 78.68928c12.09856 9.54368 9.33888 28.60032-4.9664 34.32448-67.8912 27.17696-113.34144 93.09696-113.34144 167.4752v20.03456h360.62208z m40.06912-20.03456v40.06912A20.03456 20.03456 0 0 1 712.3456 972.8H311.6544a20.03456 20.03456 0 0 1-20.03456-20.03456v-40.06912c0-80.72704 43.80672-153.2928 111.72864-191.7952a139.85792 139.85792 0 0 1-31.5904-88.69376c0-77.45536 62.78656-140.24192 140.24192-140.24192 77.45536 0 140.24192 62.78656 140.24192 140.24192a139.85792 139.85792 0 0 1-31.5904 88.69376c67.92192 38.5024 111.72864 111.06816 111.72864 191.7952z m-50.3296-500.86912a180.86912 180.86912 0 0 0-103.08096-107.3664c-14.30528-5.72928-17.06496-24.7808-4.9664-34.3296a99.9424 99.9424 0 0 0 38.1696-78.68928c0-55.3216-44.8512-100.1728-100.1728-100.1728-55.32672 0-100.1728 44.8512-100.1728 100.1728A99.9424 99.9424 0 0 0 449.9968 270.1312c12.09856 9.54368 9.33888 28.60032-4.9664 34.32448a180.86912 180.86912 0 0 0-103.08608 107.3664h340.11136z m45.9264 16.04608a20.03456 20.03456 0 0 1-19.6352 24.02304H315.65824a20.03456 20.03456 0 0 1-19.6352-24.02304c12.76928-62.88896 52.47488-116.60288 107.33056-147.72736A139.85792 139.85792 0 0 1 371.7632 191.4368C371.75808 113.99168 434.54464 51.2 512 51.2c77.45536 0 140.24192 62.79168 140.24192 140.24192 0 32.9728-11.46368 64.07168-31.59552 88.704 54.85568 31.1296 94.5664 84.8384 107.33056 147.72736z"
                          fill="#ffffff"
                          p-id="7599"
                        ></path>
                      </svg>
                      <div>谈话谈心</div>
                    </div>
                    <div
                      className={styles.toolCard}
                      style={{ backgroundColor: '#222999' }}
                      onClick={handleAutoRollCall}
                    >
                      <svg
                        t="1712402850445"
                        className="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="8970"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M485.568 906.496c-0.64-0.192-145.088 10.368-209.216-16.256-86.528-35.968-117.184-62.592-117.184-79.488 0-15.936-2.944-98.112 77.248-123.2a4319.36 4319.36 0 0 1 155.264-43.136 25.216 25.216 0 0 0 22.08-24.832V541.888a24.064 24.064 0 0 0-7.68-17.664c-69.248-66.56-97.728-131.456-97.728-243.584 0-53.312 14.656-91.008 39.296-119.744 26.496-31.104 68.032-46.912 123.264-46.912 159.104 0 169.408 128.384 169.408 171.392a291.072 291.072 0 0 1-26.56 122.048c-13.056 28.544-26.624 44.736-26.752 45.12a24.256 24.256 0 0 0 3.776 35.2 26.88 26.88 0 0 0 36.672-3.648c2.56-3.072 65.088-77.696 65.088-198.72 0-65.024-16.832-109.376-52.544-150.72C600.256 88.448 541.76 64 470.976 64 335.808 64 256.256 140.416 256.256 280.704c0 60.864 8.192 104.256 25.024 148.928a340.48 340.48 0 0 0 80.256 122.368v46.784c-36.928 6.72-73.408 15.552-109.312 26.368-39.232 12.16-70.848 25.536-93.824 40.256-34.176 21.632-51.456 117.76-51.456 145.344 0 45.76 48.64 83.968 149.056 125.504 67.712 28.032 213.12 17.664 215.872 18.368l6.848 1.024a25.92 25.92 0 0 0 25.28-18.496 24.704 24.704 0 0 0-18.432-30.656z"
                          p-id="8971"
                          fill="#ffffff"
                        ></path>
                        <path
                          d="M937.024 515.776a26.624 26.624 0 0 0-37.376 4.16c-9.152 11.456-199.808 266.624-228.224 268.928-27.712 2.432-122.752-90.112-122.752-90.112a26.496 26.496 0 0 0-36.224 4.032 26.56 26.56 0 0 0 1.856 36.48c10.304 9.664 101.056 82.048 123.072 98.304l25.6 18.816c5.12 3.264 10.752 5.376 16.576 4.736a23.68 23.68 0 0 0 17.536-9.152c6.208-7.36 35.52-41.344 35.776-41.792l208.448-257.216a26.56 26.56 0 0 0-4.288-37.184z"
                          p-id="8972"
                          fill="#ffffff"
                        ></path>
                      </svg>
                      <div>一键点名</div>
                    </div>
                    <div
                      className={styles.toolCard}
                      style={{ backgroundColor: 'orange' }}
                      onClick={() => setRollCallOpen(true)}
                    >
                      <svg
                        t="1712402850445"
                        className="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="8970"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M485.568 906.496c-0.64-0.192-145.088 10.368-209.216-16.256-86.528-35.968-117.184-62.592-117.184-79.488 0-15.936-2.944-98.112 77.248-123.2a4319.36 4319.36 0 0 1 155.264-43.136 25.216 25.216 0 0 0 22.08-24.832V541.888a24.064 24.064 0 0 0-7.68-17.664c-69.248-66.56-97.728-131.456-97.728-243.584 0-53.312 14.656-91.008 39.296-119.744 26.496-31.104 68.032-46.912 123.264-46.912 159.104 0 169.408 128.384 169.408 171.392a291.072 291.072 0 0 1-26.56 122.048c-13.056 28.544-26.624 44.736-26.752 45.12a24.256 24.256 0 0 0 3.776 35.2 26.88 26.88 0 0 0 36.672-3.648c2.56-3.072 65.088-77.696 65.088-198.72 0-65.024-16.832-109.376-52.544-150.72C600.256 88.448 541.76 64 470.976 64 335.808 64 256.256 140.416 256.256 280.704c0 60.864 8.192 104.256 25.024 148.928a340.48 340.48 0 0 0 80.256 122.368v46.784c-36.928 6.72-73.408 15.552-109.312 26.368-39.232 12.16-70.848 25.536-93.824 40.256-34.176 21.632-51.456 117.76-51.456 145.344 0 45.76 48.64 83.968 149.056 125.504 67.712 28.032 213.12 17.664 215.872 18.368l6.848 1.024a25.92 25.92 0 0 0 25.28-18.496 24.704 24.704 0 0 0-18.432-30.656z"
                          p-id="8971"
                          fill="#ffffff"
                        ></path>
                        <path
                          d="M937.024 515.776a26.624 26.624 0 0 0-37.376 4.16c-9.152 11.456-199.808 266.624-228.224 268.928-27.712 2.432-122.752-90.112-122.752-90.112a26.496 26.496 0 0 0-36.224 4.032 26.56 26.56 0 0 0 1.856 36.48c10.304 9.664 101.056 82.048 123.072 98.304l25.6 18.816c5.12 3.264 10.752 5.376 16.576 4.736a23.68 23.68 0 0 0 17.536-9.152c6.208-7.36 35.52-41.344 35.776-41.792l208.448-257.216a26.56 26.56 0 0 0-4.288-37.184z"
                          p-id="8972"
                          fill="#ffffff"
                        ></path>
                      </svg>
                      <div>手动点名</div>
                    </div>
                    <div
                      className={styles.toolCard}
                      style={{ backgroundColor: 'green' }}
                      onClick={() => setEnterOpen(true)}
                    >
                      <svg
                        t="1712672428114"
                        className="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2392"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M938.432 322.176c10.816 18.368 16.448 38.912 17.088 61.696v441.856c-1.152 36.16-13.696 66.176-37.632 90.112-23.936 23.936-53.952 36.48-90.112 37.632H187.2c-36.16-1.152-66.24-13.696-90.112-37.632-23.936-23.936-36.48-53.952-37.632-90.112V383.872c0-22.72 5.824-43.328 17.472-61.696 11.648-18.368 27.136-33.984 46.4-46.784l320.256-198.656c19.84-12.8 42.112-19.264 66.944-19.264 24.768 0 47.104 6.4 66.944 19.264l320.256 198.656c16.32 12.8 29.888 28.416 40.704 46.784z m-226.176 375.36c8.192-8.448 12.224-19.264 12.224-32.384s-4.096-23.744-12.224-31.936c-8.192-8.192-18.944-12.224-32.384-12.224H341.248c-9.92 0-18.112 2.496-24.512 7.424-6.4 4.992-11.072 10.944-14.016 17.92-6.4 9.92-8.64 19.264-6.592 28.032a46.464 46.464 0 0 0 12.672 22.72l109.376 134.72c2.944 3.52 7.296 6.4 13.12 8.768 5.824 2.304 11.968 3.52 18.368 3.52s12.544-1.152 18.368-3.52c5.824-2.304 10.496-5.248 14.016-8.768 9.92-9.92 15.744-20.544 17.472-31.936s-2.048-22.016-11.392-31.936l-50.752-57.728h242.368c13.504 0.064 24.32-4.16 32.512-12.672zM308.864 467.008c-8.192 8.192-12.224 18.816-12.224 31.936s4.096 23.744 12.224 31.936c8.192 8.192 18.944 12.544 32.384 13.12h338.624c9.92-0.576 18.048-3.328 24.512-8.32 6.4-4.928 11.072-10.624 14.016-17.088 3.52-9.92 4.928-19.392 4.352-28.416-0.576-9.024-4.096-16.768-10.496-23.168L596.736 333.12c-9.92-9.92-20.544-14.848-31.936-14.848s-22.016 4.992-31.936 14.848c-9.344 6.976-14.272 16.768-14.848 29.312-0.576 12.544 2.304 24.064 8.768 34.56l50.752 56.896H341.248c-13.44 0.576-24.256 4.928-32.384 13.12z"
                          p-id="2393"
                          fill="#ffffff"
                        ></path>
                      </svg>
                      <div>进出监室登记</div>
                    </div>
                    <div
                      className={styles.toolCard}
                      style={{ backgroundColor: 'red' }}
                      onClick={handleDiagnosis}
                    >
                      <svg
                        t="1712491479838"
                        className="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="3469"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M832.096 322.72H198.272c-59.264 0-97.024 37.728-97.024 96.992v401.024c0 59.36 37.76 97.056 97.024 97.056h633.824c59.36 0 97.088-37.696 97.088-97.056V419.744c0-59.264-37.728-97.024-97.088-97.024z m45.376 489.408c0 36.64-18.4 53.888-57.152 53.888H210.112c-38.784 0-57.12-17.248-57.12-53.888V428.384c0-36.64 18.304-53.92 57.12-53.92h610.176c38.752 0 57.152 17.28 57.152 53.92v383.744z"
                          fill="#ffffff"
                          p-id="3470"
                        ></path>
                        <path
                          d="M630.592 115.744h-229.664c-48.48 0-92.672 44.224-92.672 91.648v167.072h413.952V207.392c-0.032-47.424-44.192-91.648-91.616-91.648z m39.84 206.976H360V205.248c0-20.48 21.568-37.728 47.424-37.728h215.616c25.92 0 47.392 17.28 47.392 37.728v117.472zM411.744 594.368a12.48 12.48 0 0 1 12.96-12.928h181.12a12.48 12.48 0 0 1 12.896 12.928v25.952a12.416 12.416 0 0 1-12.896 12.864h-181.12a12.48 12.48 0 0 1-12.96-12.864v-25.952z"
                          fill="#ffffff"
                          p-id="3471"
                        ></path>
                        <path
                          d="M528.16 503.872a12.48 12.48 0 0 1 12.96 12.896v181.12a12.48 12.48 0 0 1-12.96 12.928h-25.856a12.48 12.48 0 0 1-12.96-12.928v-181.12c0-7.52 5.376-12.896 12.96-12.896h25.856z"
                          fill="#ffffff"
                          p-id="3472"
                        ></path>
                      </svg>
                      <div>巡诊打卡</div>
                    </div>
                    <div
                      className={styles.toolCard}
                      style={{ backgroundColor: '#333' }}
                      onClick={handleMore}
                    >
                      <svg
                        t="1712491427574"
                        className="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2372"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M736.1792 456.704c-19.92704-11.52512-44.48256-11.52512-64.40448 0s-32.19968 32.82432-32.19968 55.87456 12.27264 44.34944 32.19968 55.86944c19.92704 11.52512 44.48256 11.52512 64.40448 0 19.93216-11.52 32.19968-32.8192 32.19968-55.86944S756.11136 468.22912 736.1792 456.704z"
                          fill="#ffffff"
                          p-id="2373"
                        ></path>
                        <path
                          d="M997.71904 357.7088c-10.9312-34.4064-25.1904-67.37408-43.18208-98.6624-12.16512-21.15584-40.35072-22.93248-54.0416-3.39968-8.56064 12.20096-7.19872 24.61184-0.19968 37.36064 59.61216 108.55424 74.09152 223.05792 40.13056 342.07744-68.73088 240.91648-318.67904 377.15456-558.4128 305.82784-175.66208-52.25472-303.3344-211.02592-316.88192-394.368-5.53984-74.97728 6.90688-146.90816 36.8896-215.91552 82.54976-189.9776 293.2224-299.58656 495.7696-257.8176 46.5664 9.6 90.61888 25.79968 131.99872 49.2544 7.08608 4.00896 14.40768 6.69184 22.68672 5.41184 13.91104-2.15552 24.73472-12.30336 27.22816-25.43104 2.7392-14.39232-3.70176-27.47392-17.72544-35.25632C647.23456 3.03616 525.46048-15.55456 397.50656 13.0816 165.39136 65.02912 0.05632 273.18272 0 511.65184c-0.00512 38.14912 4.0192 75.87328 12.42112 113.06496 65.00864 287.8208 359.52128 461.42976 642.048 378.55232 199.6288-58.56256 343.83872-232.51456 364.79488-440.70912C1026.2784 492.88704 1018.94144 424.51456 997.71904 357.7088z"
                          fill="#ffffff"
                          p-id="2374"
                        ></path>
                        <path
                          d="M478.62784 456.704c-19.92704 11.52512-32.2048 32.82432-32.2048 55.87456 0 35.63008 28.83584 64.51712 64.40448 64.51712s64.40448-28.88704 64.40448-64.51712c0-23.05024-12.27264-44.34944-32.2048-55.87456C523.10528 445.17888 498.55488 445.17888 478.62784 456.704z"
                          fill="#ffffff"
                          p-id="2375"
                        ></path>
                        <path
                          d="M285.60896 456.704c-19.92704 11.52512-32.2048 32.82432-32.2048 55.87456s12.27264 44.34944 32.2048 55.86944c19.92704 11.52512 44.47744 11.52512 64.40448 0 19.92704-11.52 32.19968-32.8192 32.19968-55.86944s-12.27264-44.34944-32.19968-55.87456C330.0864 445.17888 305.53088 445.17888 285.60896 456.704z"
                          fill="#ffffff"
                          p-id="2376"
                        ></path>
                      </svg>
                      <div>更多功能</div>
                    </div>
                  </div>
                </Row>
              )}
            </>
          )}
        </div>
      </ConfigProvider>
    </>
  );
};

export default Inspector;
